
<style scoped>
</style>
<!-- tsx -->
<template>
  <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 商 户 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <!-- <el-table-column prop="id" width="250" label="ID" align="center"></el-table-column> -->
                <el-table-column prop="name" label="商家名称"  align="center"></el-table-column>
                <el-table-column prop="count" label="订单笔数" width="100" align="center"></el-table-column>
                <el-table-column prop="amount" label="账单金额" width="100" align="center"></el-table-column>
                <el-table-column prop="billOn" label="账单日期" width="200"  align="center"></el-table-column>
                <el-table-column prop="status" label="结算状态" width="100" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status" style="color:#409EFF">已结算</span>
                    <span v-if="!scope.row.status" style="color:#f56c6c">未结算</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" :disabled='scope.row.status' @click="searchDetail(scope.row.id)">结算</el-button>
                        <el-button size="mini" type="primary"  @click="goDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="详情" :visible.sync="showDetail" width="60%">
            <el-table
                :data="tableDetail"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="status" label="图片" width="100" align="center">
                  <template slot-scope="scope">
                    <el-image 
                      style="width: 25px; height: 25px"
                      :src="scope.row.thumbnail" 
                      :preview-src-list="[scope.row.thumbnail]">
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"  align="center"></el-table-column>
                <el-table-column prop="count" label="数量" align="center">
                </el-table-column>
            </el-table>
        </el-dialog>
  </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingMerchantBill,MerchantSettlement,QueryMerchantBillDetail } from '@/api/bill';
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
data() {
 // 这里存放数据
  return {
    query:{
      pageIndex:1,
      pageSize:20
    },
    showDetail:false,
    tableDetail:[],
      tableData:[],
      pageTotal:0
  }
},
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  goDetail(id){
    QueryMerchantBillDetail({id:id}).then(res => {
      // console.log(res)
            if(res.RequestStatus == 200){
              this.showDetail= true,
              this.tableDetail = res.Data.list
            }
    })
  },
    pageChange(e){
        this.query.pageIndex = e
        this.getList()
    },
  getList() {
    PagingMerchantBill(this.query).then(res => {
      this.tableData = res.Data.list
                this.pageTotal = res.Data.paging.totalItemCount;
    })
  },
  sizeChange(e) {
    this.query.pageSize = e
    this.getList()
  },
  searchDetail(id){
     this.$confirm('确定结算商户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          MerchantSettlement({id:id}).then(res => {
            // console.log(res)
            if(res.RequestStatus == 200){
              this.$message.success('成功')
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  console.log(123)
  this.getList()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>